<template>
  <div style="padding: 20px;">
    <el-form ref="form" label-width="80px">
      <el-form ref="form" label-width="80px">
        <el-form-item label="课程标题">
          <el-input v-model="courseInfo.title"/>
        </el-form-item>
        <el-form-item label="课程讲师">
          <el-select v-model="courseInfo.teacherId" placeholder="请选择活动区域">
            <el-option
              v-for="teacher in teachers"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="课程分类">
          <el-select v-model="courseInfo.subjectParentId" placeholder="请选择一级分类" @change="handleSubjectChange">
            <el-option
              v-for="pSubject in pSubjects"
              :key="pSubject.id"
              :label="pSubject.title"
              :value="pSubject.id" />
          </el-select>
          <el-select v-model="courseInfo.subjectId" placeholder="请选择一级分类">
            <el-option
              v-for="cSubject in cSubjects"
              :key="cSubject.id"
              :label="cSubject.title"
              :value="cSubject.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程课时">
          <el-input-number v-model="courseInfo.lessonNum" :min="0" controls-position="right"/>
        </el-form-item>
        <el-form-item label="课程简介">
          <tinymce v-model="courseInfo.description"/>
        </el-form-item>
        <el-form-item label="课程价格">
          <el-input-number v-model="courseInfo.price" :min="0" controls-position="right"/>元
        </el-form-item>
        <el-form-item label="课程封面">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :action="uploadPath"
            class="avatar-uploader">
            <img v-if="courseInfo.cover" :src="courseInfo.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="success" @click="handleSaveAndNext">保存并下一步</el-button>
        </div>
      </el-form>
  </el-form></div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import teacherApi from '@/api/teacher.js'
import subjectApi from '@/api/subject.js'
import courseApi from '@/api/course.js'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      uploadPath: process.env.BASE_API + '/admin/oss/upload?module=cover',
      courseInfo: {
        lessonNum: 0,
        subjectParentId: '',
        subjectId: ''
      },
      teachers: [],
      pSubjects: [],
      cSubjects: []

    }
  },
  created() {
    // 判断是否为点击课程列表编辑按钮过来的
    // 如果请求参数id不为空 是编辑过来的 将id设置给courseId属性 后续业务会自动查询
    if (this.$route.query.id) {
      this.$parent.courseId = this.$route.query.id
    }
    // 进入页面时查询讲师列表
    this.getList()
    this.getNestedSubjects()
  },
  methods: {
    // 查询一级课程和他的子分类嵌套集合
    getNestedSubjects() {
      subjectApi.getNestedSubjects().then(r => {
        this.pSubjects = r.data.items
        // 判断 如果父页面courseId属性值不为空，查询课程基本信息回显
        if (this.$parent.courseId) {
          this.getCourseInfo() // 在分类嵌套集合查询成功之后再查询课程基本信息
        }
      })
    },

    getList() {
      teacherApi.getList().then(r => {
        this.teachers = r.data.items
      })
    },

    // 查询课程基本信息回显的方法
    getCourseInfo() {
      courseApi.getCourseInfo(this.$parent.courseId).then(r => {
        this.courseInfo = r.data.item
        // 查询到课程基本信息后  使用它的一级分类id查询二级分类子集合
        this.pSubjects.forEach(pSubject => {
          if (pSubject.id === this.courseInfo.subjectParentId) {
            this.cSubjects = pSubject.children
            return
          }
        })
      })
    },
    handleAvatarSuccess(res, file) {
      this.courseInfo.cover = res.data.path
      // 强制渲染 来回显封面
      this.$forceUpdate()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 一级分类下拉选框内容改变的监听
    handleSubjectChange(pubjectId) {
      // 清空二级分类回显缓存: 回显的是选中的二级分类的id的缓存(couseInfo.subjectId)
      // this.cSubjects = []
      this.courseInfo.subjectId = ''
      // console.log(psubjectId)
      // 获取选中的一级分类的二级分类集合
      this.pSubjects.forEach(pSubject => {
        if (pSubject.id === pubjectId) {
          // 接收二级分类集合
          this.cSubjects = pSubject.children
          return
        }
      })
    },
    // 修改step1中的active
    handleSaveAndNext() {
      if (this.$parent.courseId) { // 更新
        courseApi.updateById(this.courseInfo, this.$parent.courseId).then(r => {
          this.$message.success('更新课程基本信息成功')
          this.$parent.active = 1
        })
      } else { // 新增
        // this.flag = true
        courseApi.saveCourseInfo(this.courseInfo).then(r => {
        // console.log('courseInfo' + this.courseInfo)
          this.$parent.courseId = r.data.id// 保存新增成功的课程ID，提供给第二步第三步使用
          // console.log('保存课程的' + this.$parent.courseId)
          this.$message.success('保存课程基本信息成功')
          this.$parent.active = 1
        })
      }
    }
  }
}

</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 200px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 400px;
    height: 200px;
    display: block;
  }
  .tinymce-container {
  position: relative;
  line-height: normal;
}
</style>
